<template>

	<view class="content">
		<view>
			<image class="shangbiao" :src="sbimage.url"></image>
			<view class="divder" @click="gohome()">
				<h1>成为合作伙伴 打造美好品质</h1>
			</view>
		</view>
		<!-- <view class="input">
			<input v-model="value" class="textinput" type="text" placeholder="请输入搜索关键词" />
			<view class="in" @click="getValue()">搜索</view>
		</view> -->

		<view class="swiper-class">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in info[0]" :key="index">
					<image class="bjimage" :src="item.imageurl"></image>
				</swiper-item>

			</swiper>
		</view>

		<!-- 简介模块 -->
		<view class="jj">
			<jj :pctext='pctext' :pcjianjieimage='pcjianjieimage'></jj>
		</view>

		<!-- 成品展示模块 -->
		<view class="snzs">
			<view class="snzstext">
				<view class="snzstext_one">
					室内展示
				</view>
				<view class="snzstext_two">
					Indoor Display
				</view>
			</view>

		</view>
		<view class="shangp">

			<sp class="sp" v-for="item in searchedListthree.slice().reverse()" :sbimage='sbimage.url' :key="item.objectId" :goodlist="item">
			</sp>
		</view>
		<view class="cpzs">
			<view class="cpzstext">
				<view class="cpzstext_one">
					成品展示
				</view>
				<view class="cpzstext_two">
					Finished Product Display
				</view>
			</view>
		</view>


		<!--  -->
		<view class="shangp">

			<sp class="sp" v-for="item in searchedList.slice().reverse()" :key="item.objectId" :goodlist="item"></sp>
		</view>
		<view class="clzs">
			<view class="clzstext">
				<view class="clzstext_one">
					材料展示
				</view>
				<view class="clzstext_two">
					Material Presentation
				</view>
			</view>
		</view>
		<view class="clshangp">

			<sp class="clsp" v-for="item in searchedListtwo.slice().reverse()" :key="item.objectId" :goodlist="item">
			</sp>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				list: [],
				searchedList: [],
				searchedListtwo: [],
				searchedListthree: [],
				pctext: [],
				pcjianjieimage: [],
				sbimage:[],
				isoff: true,
				value: '',
				info: [

				],
				current: 0,
				mode: 'round',

			}
		},

		onShow() {
			if (this.isoff) {
				let url = `/1.1/classes/pccpimage`
				this.$get(url).then(res => {
					uni.stopPullDownRefresh()
					// console.log(res)
					let {
						results
					} = res
					if (results.length) {
						this.list = res.results
						// return
						console.log(res.results)
						for (let i = 0; i < results.length; i++) {
							if (res.results[i].bcid === '1') {
								this.searchedList.push(res.results[i])
							} else if (res.results[i].bcid === "2") {
								this.searchedListtwo.push(res.results[i])
							} else {
								this.searchedListthree.push(res.results[i])
							}
						}

						// this.searchedList = res.results

					}
					// console.log(this.list)
				})
				// console.log(this.list)
				console.log(this.value)
				// console.log(this.list)
				this.onoff()
			}


			let url = `/1.1/classes/pctext`
			this.$get(url).then(res => {
				uni.stopPullDownRefresh()
				this.pctext = res.results[0]

			})

			let urlo = `/1.1/classes/x_jianjie_image`
			this.$get(urlo).then(res => {
				uni.stopPullDownRefresh()
				this.pcjianjieimage = res.results[0]
				console.log(this.pcjianjieimage)

			})
			let urlsb = `/1.1/classes/sb`
			this.$get(urlsb).then(res => {
				uni.stopPullDownRefresh()
				// console.log(res)
				this.sbimage = res.results[0]

			})

		},
		mounted() {

		},
		onLoad() {
			this.lunboimage()
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			onoff() {

				this.isoff = false
			},
			lunboimage() {
				let url = `/1.1/classes/lunbo_image`
				this.$get(url).then(res => {

					this.info.push(res.results)
				})
				console.log(this.info)
			},
			gohome() {
				uni.switchTab({
					url: '/pages/myhome/myhome'
				})
			}

			// getValue() {
			// 	this.searchedList = ''

			// 	// console.log(text,this.list,this.searchedList)
			// 	// if(text)
			// 	if (this.value === '') {

			// 		this.searchedList = this.list;

			// 	} else {
			// 		this.searchedList = this.list.filter(item => {
			// 			// console.log(item.xiangqing,"执行了")
			// 			return item.xiangqing.includes(this.value);

			// 		});
			// 	}


			// }


		}
	}
</script>

<style>
	.content {
		background-color: gainsboro;
	}

	.bjimage {
		width: 100vw;

	}

	.shangp {
		display: flex;
		flex-wrap: wrap;
		/* position: absolute; */

		/* margin: 0 auto; */
	}

	.sp {
		margin-left: 8px;
		margin-right: 8px;
		flex-grow: 2;
		margin-top: 6px;

		display: flex;
		width: 38%;
		box-sizing: border-box;


	}

	.clshangp {
		display: flex;
		flex-wrap: wrap;
		/* position: absolute; */
		top: 1550px;
		/* margin: 0 auto; */
	}

	.clsp {
		margin-left: 8px;
		margin-right: 8px;
		flex-grow: 1;
		margin-top: 6px;

		display: inline-block;
		width: 38%;
		box-sizing: border-box;

		/* background-color: red; */

	}

	.jj {
		margin-top: 10px;
	}


	.input {
		width: 300px;
		display: flex;
		margin: 0 auto;
	}

	.textinput {
		/* margin-left: 20px; */

		width: 260px;
		border: 1px solid rgb(217, 217, 217);
	}

	.in {

		margin-left: 10px;
		width: 40px;

		text-align: center;
		border-radius: 20%;
		background-color: rgb(245, 245, 245);
	}

	.swiper-class {

		border: 1px solid rgb(217, 217, 217);
		/* margin-top: 6px; */
	}

	.shangbiao {
		width: 100px;
		height: 50px;
		/* border: 1px solid black; */
	}



	.cpzs {
		width: 100%;
		height: 60px;
		/* background-color: aliceblue; */
		/* background: linear-gradient(to left, #e6e9f0,#eef1f5); */
		/* position: absolute; */
		margin-top: 20px;
		background: white;
		border-radius: 10%;

	}

	.cpzstext {

		width: fit-content;
		height: fit-content;
		margin: 0 auto;
	}

	.cpzstext_one {
		text-align: center;
		/* margin-top: 2px; */
		font-size: 17px;
		padding-top: 7px;
		font-weight: lighter;
		color: black;
	}

	.cpzstext_two {
		color: black;
	}


	.clzs {
		width: 100%;
		height: 60px;
		/* background: linear-gradient(to left, #e6e9f0,#eef1f5); */
		/* position: absolute; */
		background: white;
		border-radius: 10%;
		margin-top: 20px;
	}

	.clzstext {

		width: fit-content;
		height: fit-content;
		margin: auto auto;
		/* border: 1px solid black; */

	}

	.clzstext_one {
		text-align: center;
		/* margin-top: 2px; */
		font-size: 17px;
		padding-top: 7px;
		font-weight: lighter;
		color: black;
	}

	.clzstext_two {
		color: black;
	}

	.snzs {
		width: 100%;
		height: 60px;
		background: white;
		/* position: absolute; */
		/* background-color: gainsboro; */
		border-radius: 10%;
		margin-top: 10px;
	}

	.snzstext {

		width: fit-content;
		height: fit-content;
		margin: 0 auto;
	}

	.snzstext_one {
		text-align: center;
		/* margin-top: 2px; */
		font-size: 17px;
		padding-top: 7px;
		font-weight: lighter;
		color: black;
	}

	.snzstext_two {
		color: black;
	}

	.divder {
		/* border-bottom: 1px solid rgb(245, 245, 245); */
		/* border: 1px solid black; */
		height: 48px;
		width: 200px;
		float: right;
		margin: 0 auto;
		margin-right: 10px;

	}

	.divder h1 {
		/* border: 1px solid black; */
		line-height: 48px;
		margin: 0 auto;
		size: 12px;
	}

	.content {
		/* background: linear-gradient(to bottom, #a8edea, #fed6e3); */
	}

	.swiper {
		height: 240px;

		/* height: 304px; */
	}
</style>